:root
  // change for dark/light themes
  --app-fg hsl(233, 43%, 12%)
  --app-bg hsl(233, 37%, 20%)
  --app-bg-light hsl(233, 40%, 14%)
  --app-bg-alpha hsla(237, 18%, 20%, 95%)
  --txt hsl(0, 0%, 100%)
  --dim hsl(240, 5%, 75%)
  --bc hsl(233, 22%, 23%)
  --bc-dim hsl(233, 33%, 16%)
  --bc-light hsl(233, 37%, 22%)
  --box-shadow hsla(0,0,0,0.2)
  --hover-bg hsla(233, 88%, 90%, 0.2)
  --input-bc hsl(233, 22%, 33%)
  --input-bc-hover hsl(233, 22%, 40%)

  // change for rebranding
  --mc hsl(325, 96%, 59%)
  --accent hsl(279, 92%, 58%)
  --accent-alpha hsla(279, 92%, 58%, 0.5)
  --primary hsl(233, 88%, 57%)
  --primary-bc hsl(233, 88%, 43%)
  --link hsl(233, 88%, 82%)
  --hover hsl(233, 88%, 67%)

  // don't change
  --bright #fff
  --input-bg transparent
  --success hsl(120,58%,55%)
  --success-bc hsl(120,58%,41%)
  --warning hsl(35,100%,50%)
  --warning-bc hsl(35,75%,38%)
  --danger hsl(0,100%,55%)
  --danger-bc hsl(0,100%,41%)

//==============================================================================
// typography

x = 16px
px = 0.0625rem
sans = -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
mono = Consolas, Monaco, monospace

// sizes
aw = 64rem
width-main = 100%
width-main-max = 48rem
width-side = 16rem
bw = 3*px

//==============================================================================
// methods

df()
  font-size x
  line-height 1.5
  font-family sans
  color var(--txt)

mono()
  font-family Consolas, Monaco, monospace
  font-weight normal

shadow()
  box-shadow var(--box-shadow) 0 0.25rem 0.25rem

xxl = x * 1.75
xl = x * 1.5
lg = x * 1.25
m = x
sm = x * 0.75
xs = x * 0.7

h1 = 2rem
h2 = 1.5rem
h3 = 1.25rem
h4 = 1.125rem
h5 = 1rem
h6 = 0.75rem

//==============================================================================
// z-index

z-layers = {
  modalError: 1002,
  modalHelp: 1001,
  modal: 1000,
  appHeader: 100,
  appMenu: 99,
  toolBar: 98,
  listItem: 10,
  default: 1,
  zero: 0,
  below: -1
}

z(layer)
  z-layers[layer]
